<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加模板</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/all.min.css" rel="stylesheet">
    <!-- 添加 SweetAlert2 样式 -->
    <link href="../css/bootstrap-4.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">
    <!-- 添加富文本编辑器 -->
    <link href="../css/quill.snow.css" rel="stylesheet">
</head>
<body>
    <div id="templateAddApp" class="container-fluid p-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center">
                    <button class="btn btn-outline-secondary me-3" @click="handleBack">
                        <i class="fas fa-arrow-left"></i> 返回
                    </button>
                    <h5 class="mb-0">{{ isEdit ? '编辑模板' : '添加模板' }}</h5>
                </div>
                <button class="btn btn-primary" @click="handleSubmit">
                    <i class="fas fa-save"></i> 保存模板
                </button>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <!-- 基本信息 -->
                        <div class="mb-4">
                            <h6 class="mb-3">基本信息</h6>
                            <div class="mb-3">
                                <label class="form-label">模板名称</label>
                                <input type="text" 
                                       class="form-control" 
                                       v-model="formData.name" 
                                       :disabled="isEdit"
                                       :placeholder="isEdit ? '' : '请输入模板名称'">
                                <div v-if="isEdit" class="form-text text-muted">
                                    编辑模式下不可修改模板名称
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">所属分类</label>
                                <select class="form-select" v-model="formData.category_id">
                                    <option value="">请选择分类</option>
                                    <option v-for="category in categories" 
                                            :key="category.id" 
                                            :value="category.id">
                                        {{ category.name }}
                                    </option>
                                </select>
                                <div class="form-text text-muted">
                                    选择模板所属的分类
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">要求图片数量</label>
                                <input type="number" class="form-control" v-model="formData.pictures_count" min="1" max="9">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">模板状态</label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           v-model="formData.is_open" 
                                           true-value="1"
                                           false-value="0"
                                           id="templateStatus">
                                    <label class="form-check-label" for="templateStatus">
                                        {{ formData.is_open == 1 ? '开启' : '关闭' }}
                                    </label>
                                </div>
                                <div class="form-text text-muted">
                                    关闭状态下用户将无法获取该模板的任务
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">奖励金额（元）</label>
                                <div class="input-group">
                                    <span class="input-group-text">¥</span>
                                    <input type="number" 
                                           class="form-control" 
                                           :value="(formData.price / 100).toFixed(2)"
                                           min="0" 
                                           step="0.01" 
                                           @input="handlePriceInput">
                                </div>
                                <div class="form-text text-muted">
                                    用户爆料审核通过后将获得此金额奖励
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">单用户任务次数限制</label>
                                <div class="input-group">
                                    <input type="number" 
                                           class="form-control" 
                                           v-model="formData.user_task_limit"
                                           min="0" 
                                           step="1">
                                    <span class="input-group-text">次</span>
                                </div>
                                <div class="form-text text-muted">
                                    设置为0表示不限制，大于0表示限制单个用户最多可以获取该模板任务的次数
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">任务操作时间限制</label>
                                <div class="input-group">
                                    <input type="number" 
                                           class="form-control" 
                                           v-model="formData.duration"
                                           min="0" 
                                           step="1">
                                    <span class="input-group-text">秒</span>
                                </div>
                                <div class="form-text text-muted">
                                    设置用户获取任务后的操作时间限制，超时后任务将自动释放。默认3600秒（1小时）
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">测试数据</label>
                                <input type="text" 
                                       class="form-control" 
                                       v-model="testData"
                                       placeholder="输入测试数据，用于预览正则匹配效果">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">正则表达式</label>
                                <div class="input-group">
                                    <span class="input-group-text">/</span>
                                    <input type="text" 
                                           class="form-control" 
                                           v-model="formData.regex"
                                           placeholder="例如：goods_id=(\d+).*?shop_name=(.+)">
                                    <span class="input-group-text">/</span>
                                </div>
                                <div class="form-text text-muted">
                                    使用括号()来捕获需要的内容，可以在模板数据中使用{0}、{1}来引用
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">模板数据</label>
                                <textarea class="form-control" 
                                          v-model="formData.template_data" 
                                          rows="5"
                                          placeholder="例如：&#10;ID：{0}&#10;店铺：{1}&#10;<btn href='http://example.com/goods/{0}'>跳转</btn>&#10;<btn data='{1}'>复制</btn>"></textarea>
                            </div>
                            <!-- 修改预览区域 -->
                            <div class="mb-3" v-if="formData.template_data">
                                <label class="form-label">模板预览</label>
                                <div class="preview-container border rounded p-3">
                                    <div class="preview-header mb-2 d-flex justify-content-between align-items-center">
                                        <small class="text-muted">正则匹配结果：</small>
                                        <div v-if="regexMatches.length" class="badge bg-success">匹配成功</div>
                                        <div v-else class="badge bg-warning">未匹配</div>
                                    </div>
                                    <!-- 显示匹配结果 -->
                                    <div v-if="regexMatches.length" class="mb-3 bg-light p-2 rounded">
                                        <div v-for="(match, index) in regexMatches" :key="index">
                                            <small class="text-muted">#{index}：</small>
                                            <code>{{ match }}</code>
                                        </div>
                                    </div>
                                    <!-- 显示模板渲染结果 -->
                                    <div class="preview-content border-top pt-3">
                                        <div class="mb-2">
                                            <small class="text-muted">模板渲染结果：</small>
                                        </div>
                                        <div v-html="previewContent"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 输入框结构 -->
                        <div class="mb-4">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="mb-0">输入框结构</h6>
                                <button class="btn btn-sm btn-success" @click="addInputField">
                                    <i class="fas fa-plus"></i> 新增输入框
                                </button>
                            </div>
                            <div v-for="(field, index) in formData.input_fields" :key="index" class="mb-3">
                                <div class="d-flex gap-2 align-items-start">
                                    <div class="flex-grow-1">
                                        <div class="row">
                                            <div class="col">
                                                <input type="text" class="form-control" 
                                                       v-model="field.name" 
                                                       placeholder="输入框名称">
                                            </div>
                                            <div class="col">
                                                <input type="text" class="form-control" 
                                                       v-model="field.value" 
                                                       placeholder="默认值">
                                            </div>
                                            <div class="col-auto d-flex align-items-center">
                                                <div class="form-check">
                                                    <input class="form-check-input" 
                                                           type="checkbox" 
                                                           v-model="field.show_field"
                                                           :id="'show-field-' + index">
                                                    <label class="form-check-label" :for="'show-field-' + index">
                                                        展示字段
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <button class="btn btn-danger" @click="removeInputField(index)">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 在输入框结构后面添加切换原因管理 -->
                        <div class="mb-4">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="mb-0">切换原因</h6>
                                <button class="btn btn-sm btn-success" @click="addSwitchReason">
                                    <i class="fas fa-plus"></i> 新增原因
                                </button>
                            </div>
                            <div v-for="(reason, index) in formData.switch_reasons" :key="index" class="mb-2">
                                <div class="d-flex gap-2 align-items-center">
                                    <input type="text" 
                                           class="form-control" 
                                           v-model="reason.text" 
                                           placeholder="请输入切换原因">
                                    <button class="btn btn-danger" @click="removeSwitchReason(index)">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="form-text text-muted" v-if="!formData.switch_reasons.length">
                                添加切换原因，用户可以在切换任务时选择原因
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <!-- 示例数据预览 -->
                        <div class="mb-3">
                            <h6 class="mb-3">示例数据（H5预览）</h6>
                            <div class="mb-3">
                                <!-- 编辑器容器 -->
                                <div id="editor" class="mobile-editor"></div>
                            </div>
                            <!-- 手机预览容器 -->
                            <div class="mobile-preview-wrapper">
                                <div class="mobile-preview-header"></div>
                                <div class="mobile-preview-content">
                                    <div v-html="formData.sample_data"></div>
                                </div>
                                <div class="mobile-preview-footer"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        /* 统一按钮基础样式 */
        .template-btn {
            display: inline-block;
            padding: 4px 10px;  /* 减小内边距 */
            margin: 2px 4px;    /* 减小外边距 */
            border-radius: 20px; /* 增加圆角 */
            background: #ff6b00; /* 橙色背景 */
            color: white !important;
            text-decoration: none;
            border: none;
            cursor: pointer;
            font-size: 12px;    /* 减小字体 */
            transition: background-color 0.2s;
            line-height: 1.5;
            font-weight: 500;   /* 稍微加粗 */
        }
    
        .template-btn:hover {
            background: #e65c00; /* 深一点的橙色 */
            color: white !important;
        }
    
        /* 复制成功时的样式 */
        .template-btn.copied {
            background: #28a745 !important; /* 成功时的绿色 */
        }
    
     
    
        .template-line {
            margin: 6px 0;
            padding: 0;
        }
    
        .preview-content {
            font-size: 14px;
            line-height: 1.5;
        }
    </style>
    <!-- 底部脚本引用 -->
    <script src="../js/lib/vue.min.js"></script>
    <script src="../js/lib/sweetalert2.min.js"></script>
    <script src="../js/lib/quill.min.js"></script>
    <script src="../js/pages/template-add.js"></script>
</body>
</html> 